<template>
	<view class="modal-box" v-show="value">
		<view class="modal-container" id="modal-version-3">
			<view class="modal version-3">
				<view class="modal-header">
					<h2 class="modal-title floating">选词完成！</h2>
					<p class="modal-subtitle">你坚持完成了所有单词的筛选，真棒！</p>
				</view>

				<view class="stats-container">
					<view class="stat-card">
						<view class="stat-value">{{wordData.totalNum}}</view>
						<view class="stat-label">总数</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">{{wordData.trueNum}}</view>
						<view class="stat-label">认识</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">{{wordData.falseNum}}</view>
						<view class="stat-label">生词</view>
					</view>
					<view class="stat-card last-card">
						<view class="stat-value">{{wordData.falseNum}}</view>
						<view class="stat-label">本次待学习</view>
					</view>
				</view>
				<view class="message">
					<u-parse :html="comment"></u-parse>
				</view>
				<view class="action-buttons">
					<button class="btn btn-continue" @click.stop="addWord">继续添加单词</button>
					<button class="btn btn-close" @click.stop="startStudy">开始今日学习</button>
				</view>
			</view>
			<view class="confetti" style="left: 71.0264%; animation-delay: 4.18756s; background-color: rgb(52, 152, 219); width: 8.79633px; height: 8.79633px"></view>
			<view class="confetti" style="left: 73.8636%; animation-delay: 1.49098s; background-color: rgb(231, 76, 60); width: 11.7446px; height: 11.7446px"></view>
			<view class="confetti" style="left: 0.566278%; animation-delay: 3.88676s; background-color: rgb(52, 152, 219); width: 9.25171px; height: 9.25171px"></view>
			<view class="confetti" style="left: 73.6703%; animation-delay: 1.36975s; background-color: rgb(155, 89, 182); width: 10.4129px; height: 10.4129px"></view>
			<view class="confetti" style="left: 20.6838%; animation-delay: 3.89444s; background-color: rgb(241, 196, 15); width: 5.55889px; height: 5.55889px"></view>
			<view class="confetti" style="left: 91.161%; animation-delay: 4.05321s; background-color: rgb(46, 204, 113); width: 8.23234px; height: 8.23234px"></view>
			<view class="confetti" style="left: 45.4222%; animation-delay: 4.41394s; background-color: rgb(241, 196, 15); width: 9.71439px; height: 9.71439px"></view>
			<view class="confetti" style="left: 22.9681%; animation-delay: 4.60658s; background-color: rgb(46, 204, 113); width: 10.2411px; height: 10.2411px"></view>
			<view class="confetti" style="left: 43.9023%; animation-delay: 0.491912s; background-color: rgb(52, 152, 219); width: 10.3178px; height: 10.3178px"></view>
			<view class="confetti" style="left: 94.3515%; animation-delay: 1.94924s; background-color: rgb(241, 196, 15); width: 10.3742px; height: 10.3742px"></view>
			<view class="confetti" style="left: 85.3652%; animation-delay: 1.08339s; background-color: rgb(52, 152, 219); width: 10.8963px; height: 10.8963px"></view>
			<view class="confetti" style="left: 87.7448%; animation-delay: 0.0555047s; background-color: rgb(46, 204, 113); width: 5.45389px; height: 5.45389px"></view>
			<view class="confetti" style="left: 1.32646%; animation-delay: 0.0902278s; background-color: rgb(46, 204, 113); width: 11.8673px; height: 11.8673px"></view>
			<view class="confetti" style="left: 89.231%; animation-delay: 1.47147s; background-color: rgb(52, 152, 219); width: 13.1582px; height: 13.1582px"></view>
			<view class="confetti" style="left: 41.9607%; animation-delay: 2.72251s; background-color: rgb(46, 204, 113); width: 12.5566px; height: 12.5566px"></view>
			<view class="confetti" style="left: 42.9982%; animation-delay: 0.559336s; background-color: rgb(241, 196, 15); width: 5.37417px; height: 5.37417px"></view>
			<view class="confetti" style="left: 68.3274%; animation-delay: 4.28941s; background-color: rgb(231, 76, 60); width: 12.2344px; height: 12.2344px"></view>
			<view class="confetti" style="left: 84.0932%; animation-delay: 0.631945s; background-color: rgb(46, 204, 113); width: 11.908px; height: 11.908px"></view>
			<view class="confetti" style="left: 38.5008%; animation-delay: 1.4685s; background-color: rgb(241, 196, 15); width: 5.88305px; height: 5.88305px"></view>
			<view class="confetti" style="left: 55.3392%; animation-delay: 0.0446311s; background-color: rgb(155, 89, 182); width: 12.5118px; height: 12.5118px"></view>
			<view class="confetti" style="left: 71.5969%; animation-delay: 0.927206s; background-color: rgb(52, 152, 219); width: 12.1238px; height: 12.1238px"></view>
			<view class="confetti" style="left: 6.45174%; animation-delay: 0.602308s; background-color: rgb(155, 89, 182); width: 8.83843px; height: 8.83843px"></view>
			<view class="confetti" style="left: 35.7076%; animation-delay: 4.50229s; background-color: rgb(155, 89, 182); width: 11.4978px; height: 11.4978px"></view>
			<view class="confetti" style="left: 1.84594%; animation-delay: 4.60326s; background-color: rgb(241, 196, 15); width: 5.48327px; height: 5.48327px"></view>
			<view class="confetti" style="left: 67.8349%; animation-delay: 3.62987s; background-color: rgb(231, 76, 60); width: 13.7566px; height: 13.7566px"></view>
			<view class="confetti" style="left: 55.5891%; animation-delay: 1.98847s; background-color: rgb(52, 152, 219); width: 6.94661px; height: 6.94661px"></view>
			<view class="confetti" style="left: 98.9366%; animation-delay: 3.46115s; background-color: rgb(52, 152, 219); width: 14.8056px; height: 14.8056px"></view>
			<view class="confetti" style="left: 14.0131%; animation-delay: 1.71564s; background-color: rgb(241, 196, 15); width: 8.75007px; height: 8.75007px"></view>
			<view class="confetti" style="left: 61.627%; animation-delay: 0.101678s; background-color: rgb(52, 152, 219); width: 9.07802px; height: 9.07802px"></view>
			<view class="confetti" style="left: 99.3094%; animation-delay: 2.22938s; background-color: rgb(155, 89, 182); width: 13.9168px; height: 13.9168px"></view>
			<view class="confetti" style="left: 78.4799%; animation-delay: 2.14207s; background-color: rgb(46, 204, 113); width: 11.2751px; height: 11.2751px"></view>
			<view class="confetti" style="left: 33.3907%; animation-delay: 3.04288s; background-color: rgb(52, 152, 219); width: 13.7676px; height: 13.7676px"></view>
			<view class="confetti" style="left: 53.9159%; animation-delay: 4.0569s; background-color: rgb(52, 152, 219); width: 14.6836px; height: 14.6836px"></view>
			<view class="confetti" style="left: 45.2933%; animation-delay: 4.44148s; background-color: rgb(241, 196, 15); width: 14.7553px; height: 14.7553px"></view>
			<view class="confetti" style="left: 30.0357%; animation-delay: 4.50637s; background-color: rgb(155, 89, 182); width: 6.88414px; height: 6.88414px"></view>
			<view class="confetti" style="left: 60.1987%; animation-delay: 2.34915s; background-color: rgb(52, 152, 219); width: 12.278px; height: 12.278px"></view>
			<view class="confetti" style="left: 25.1179%; animation-delay: 3.83849s; background-color: rgb(155, 89, 182); width: 12.8104px; height: 12.8104px"></view>
			<view class="confetti" style="left: 17.5038%; animation-delay: 2.95488s; background-color: rgb(52, 152, 219); width: 14.3681px; height: 14.3681px"></view>
			<view class="confetti" style="left: 32.5107%; animation-delay: 2.29225s; background-color: rgb(231, 76, 60); width: 13.7868px; height: 13.7868px"></view>
			<view class="confetti" style="left: 40.8594%; animation-delay: 1.40305s; background-color: rgb(241, 196, 15); width: 14.3145px; height: 14.3145px"></view>
			<view class="confetti" style="left: 54.1112%; animation-delay: 4.12795s; background-color: rgb(155, 89, 182); width: 14.7711px; height: 14.7711px"></view>
			<view class="confetti" style="left: 37.8092%; animation-delay: 4.29922s; background-color: rgb(52, 152, 219); width: 5.08534px; height: 5.08534px"></view>
			<view class="confetti" style="left: 37.5114%; animation-delay: 4.01998s; background-color: rgb(231, 76, 60); width: 7.90513px; height: 7.90513px"></view>
			<view class="confetti" style="left: 18.799%; animation-delay: 3.66325s; background-color: rgb(155, 89, 182); width: 12.993px; height: 12.993px"></view>
			<view class="confetti" style="left: 55.7367%; animation-delay: 3.18517s; background-color: rgb(52, 152, 219); width: 14.4219px; height: 14.4219px"></view>
			<view class="confetti" style="left: 83.0592%; animation-delay: 4.94346s; background-color: rgb(241, 196, 15); width: 9.11526px; height: 9.11526px"></view>
			<view class="confetti" style="left: 63.4801%; animation-delay: 3.50326s; background-color: rgb(155, 89, 182); width: 11.396px; height: 11.396px"></view>
			<view class="confetti" style="left: 80.7857%; animation-delay: 3.58862s; background-color: rgb(231, 76, 60); width: 7.36176px; height: 7.36176px"></view>
			<view class="confetti" style="left: 63.1792%; animation-delay: 1.12156s; background-color: rgb(52, 152, 219); width: 9.12925px; height: 9.12925px"></view>
			<view class="confetti" style="left: 48.9175%; animation-delay: 1.83388s; background-color: rgb(52, 152, 219); width: 10.5582px; height: 10.5582px"></view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			wordData: {
				type: Object,
				default: () => null
			},
			comment: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			addWord() {
				this.$emit('addWord');
			},
			startStudy() {
				this.$emit('startStudy');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.modal-box {
		position: fixed;
		z-index: 10;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(33, 33, 33, 0.5);
	}

	@import url('../modal.css');
</style>